<template>
	<div class="Fresh">
		<header><router-link class="mui-icon mui-icon-arrowleft" to='/home'>&nbsp;</router-link><a class="title">乳品酒水</a><a>&nbsp;</a></header>
		<nav>
			<ul>
				<li v-bind:class="{ 'class-a' : index == isA}" @click="toggle(index)" v-for='(lisArr,index) in lisArr'>{{lisArr}}</li>
			</ul>
		</nav>
		<dl v-for="(i,index) in arr1">
			<dt><img :src="i.imgs"></dt>
			<dd>
				<p>{{i.names}}</p>
				<span>规格:{{i.standard}}</span>
				<span>{{i.delivery}}</span>
				<label>￥{{i.price}}</label>
				<a href="javaScript:;"><img src="../assets/cart.png"></a>
			</dd>
		</dl>
		<!--<dl>
			<dt><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1032770320,1081451520&fm=23&gp=0.jpg"></dt>
			<dd>
				<p>鲜果到家(蓝莓)鲜果鲜切</p>
				<span>规格:100g</span>
				<span>次日到达</span>
				<label>￥28</label>
				<a href="javaScript:;"><img src="../assets/cart.png"></a>
			</dd>
		</dl>-->
	</div>
</template>
<style scoped>
	.Fresh{
		overflow: hidden;
		width:100%;
	}
	header{
		width:100%;
		height:4rem;
		line-height:4rem;
		background:#e60012;
		font-size:2rem;
		display: flex;
		justify-content: space-around;
		position: fixed;left: 0;top: 0;z-index: 20;
	}
	header a{
		color:#fff;
	}
	header .title{
		margin-right:30%;
	}
	.mui-icon-arrowleft{
		margin-top:0.1rem;
		font-size:4rem;
		margin-right:18%;
	}
	nav{
		width:100%;
		height:3.3rem;
		overflow: hidden;
		overflow-x: auto;
		margin-top: 4rem;
	}
	nav ul{
		width:100rem;
	}
	nav li {
		float:left;
		line-height:3rem;
		font-size:1.6rem;
		padding-left:1rem;
		padding-right:1rem;
		color:black;
	}
	dl{
		width:47%;
		margin-left:2%;
		float:left;
		background:#fff;
		height:24rem;
		margin-bottom:0.7rem;
		position: relative;		
	}
	dl dt{
		width:90%;
		margin-left:5%;
		height:12rem;
		margin-top:1.4rem;
	}
	dl img{
		width:100%;
		height:12rem;
		
	}
	dl dd{
		width:100%;
		text-align: left;
		text-indent: 0.4rem;
	}
	dl dd img{
		position: absolute;
		width:2rem;
		height:2rem;
		bottom:1.6rem;
		right:1rem;
	}
	dl dd p{
		width:100%;
		height:1.8rem;
		font-size:1.8rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color:#454545;
		margin-top:0.6rem;
		margin-bottom:0.6rem;
	}
	dl dd span{
		display: block;
		color:#7f7f7f;
		font-size:1.6rem;
		width:100%;
		margin-bottom:0.4rem;
	}
	dl dd label{
		color:#e60012;
		width:100%;
		font-size:2.2rem;
		font-weight: bold;
		padding-top:0.4rem;
	}
	.class-a{
		border-bottom:3px solid red;
	}
</style>
<script>
	export default {
		name:'Greens',
		data () {
			return {
				msg: '乳品酒水',
				isA: false,
				lisArr: ['全部','常温纯牛奶','饮用水','碳酸饮料','功能饮料','茶饮料','果味饮料','冲调饮品'],
				List:[],
				// 截取的数组
				GoodsArr1:[],
				GoodsArr2:[],
				GoodsArr3:[],
				GoodsArr4:[],
				GoodsArr5:[],
				GoodsArr6:[],
				GoodsArr7:[],
				GoodsArr8:[],
				// 盛放数组的数组
				arr:[],
				// 要渲染的数组
				arr1:[]
			}
		},
		methods: {
			toggle: function (index) {
				this.isA = index;
				this.arr1 = this.arr[index]
			}
		},
		created:function(){
			var aaa = this;
			var URl = "http://www.yanhanbo.top/user/origin.php?names=&imgs=&standard=&genre=&delivery=&price=&type=%E6%89%80%E6%9C%89";
			$.get(URl,function(data){
				aaa.List=JSON.parse(data).data;
				// console.log(aaa.List);
				aaa.GoodsArr1=aaa.List.slice(5,27);
				aaa.GoodsArr2=[];
				aaa.GoodsArr3=aaa.List.slice(10,14);
				aaa.GoodsArr4=aaa.List.slice(26,27);
				aaa.GoodsArr5=aaa.List.slice(4,6);
				aaa.GoodsArr6=aaa.List.slice(17,22);
				aaa.GoodsArr7=aaa.List.slice(22,26);
				aaa.GoodsArr8=aaa.List.slice(27,28);
				
				aaa.arr=[aaa.GoodsArr1,aaa.GoodsArr2,aaa.GoodsArr3,aaa.GoodsArr4,aaa.GoodsArr5,aaa.GoodsArr6,aaa.GoodsArr7,aaa.GoodsArr8];
				aaa.arr1=aaa.arr[0];
			})
		}
	}
</script>